<template>
	<view class="shop-detail-content">
		<!-- 海报区域 -->
		<view class="banner-area">
			<image class="banner-img" :src="productBannerImg" mode="aspectFill"></image>
			<view class="banner-btns">
			</view>
		</view>
		<!-- 商品信息区域 -->
		<view class="product-info-area">
			<view class="sales-tags">
				<text class="sales-label">{{ productDetail.salesLabel1 || '人气热销！' }}{{ productDetail.salesLabel2 ||
					''}}</text>
				<text class="sales-label">{{ productDetail.salesLabel3 || '' }}</text>
			</view>
			<view class="price-info">
				<text class="current-price">¥{{ currentPrice }}</text>
				<text class="origin-price">¥{{ originPrice }}</text>
				<text class="sold-count">已售{{ productSoldCount }}</text>
				<text class="hot-tag">{{ productHotTag }}</text>
			</view>
			<view class="product-title">{{ productTitle }}</view>
			<view class="product-desc">
				<text>{{ productDesc }}</text>
				<view v-if="descExpand && productDetail.descReason" class="desc-reason">{{ productDetail.descReason }}
				</view>
				<text class="desc-toggle" @click="descExpand = !descExpand">{{ descExpand ? '收起' : '展开' }}</text>
			</view>
			<view class="service-detail-list">
				<view class="service-detail-item"><text>服务时长：</text><text>{{ productDetail.duration ?
					productDetail.duration + '分钟' : '到店详询'}}</text></view>
			</view>
			<view class="service-rule-list">
				<view class="service-rule-item"><text>使用时间：</text><text>{{ productDetail.useTime || '周一至周日可用' }}</text>
				</view>
				<view class="service-rule-item"><text>预约方式：</text><text>{{ productDetail.reserveWay ||
						'至少提前30分钟预约'}}</text></view>
				<view class="service-rule-item"><text>活动信息：</text><text class="rule-link">{{ productDetail.activity ||
						'夏日特惠・点击去抢礼品'}}</text></view>
				<view v-if="ruleExpand && productDetail.ruleMore" class="service-rule-more">{{ productDetail.ruleMore }}
				</view>
				<text class="rule-toggle" @click="ruleExpand = !ruleExpand">{{ ruleExpand ? '收起' : '展开更多' }}</text>
			</view>
			<view class="shop-info-area" @click="showShopList = true">
				<text class="shop-distance">{{ productDetail.shopDistance || '最近4.4公里' }}</text>
				<text class="shop-name">{{ productDetail.shopName || '福润轩多店通用' }}</text>
				<text class="shop-arrow">›</text>
			</view>
		</view>
		<!-- 门店列表弹窗 -->
		<view v-if="showShopList" class="shop-popup-bg" @click="showShopList = false">
			<view class="shop-popup" @click.stop>
				<!-- 弹窗标题栏 -->
				<view class="popup-header">
					<text class="popup-title">多家通用门店</text>
					<view class="popup-header-btns">
						<view class="popup-btn search-btn" @click.stop="onShopSearch">
							<text class="iconfont icon-search"></text>
						</view>
						<view class="popup-btn close-btn" @click.stop="showShopList = false">
							<text class="iconfont icon-close"></text>
						</view>
					</view>
				</view>
				<!-- 门店列表 可滑动 -->
				<scroll-view class="popup-shop-list scroll-y" scroll-y="true">
					<view v-for="shop in shops" :key="shop.id" class="popup-shop-item">
						<view class="popup-shop-main">
							<view class="popup-shop-title">
								<text class="popup-shop-name">{{ shop.name }}</text>
								<text v-if="shop.status === 'pause'" class="shop-status">暂停营业</text>
							</view>
							<view class="popup-shop-meta">
								<view class="shop-rate">
									<text class="star">★</text>
									<text class="rate-num">{{ shop.rate }}</text>
									<text class="rate-recommend">推荐 {{ shop.recommend }} 条评价</text>
								</view>
								<text class="shop-distance">距你 {{ shop.distance }}km</text>
							</view>
							<view class="popup-shop-address">{{ shop.address }}</view>
						</view>
						<view class="popup-shop-actions">
							<button class="nav-btn" :disabled="shop.status === 'pause'" @click.stop="onNav(shop)"
								:class="{ disabled: shop.status === 'pause' }">
								<text class="iconfont icon-nav"></text>
							</button>
							<button class="tel-btn" :disabled="shop.status === 'pause'" @click.stop="onTel(shop)"
								:class="{ disabled: shop.status === 'pause' }">
								<text class="iconfont icon-tel"></text>
							</button>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 底部购买按钮 -->
		<view class="buy-btn-area">
			<button class="buy-btn" @click="onBuy">极速付 ¥{{ currentPrice }}</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showShopList: false,
			descExpand: false,
			ruleExpand: false,
			shops: [], // 后台获取
			// 新增套餐详情字段
			productDetail: {},
			productTitle: '',
			currentPrice: '',
			originPrice: '',
			productDesc: '',
			productSoldCount: '',
			productHotTag: '',
			productBannerImg: '',
		};
	},
	methods: {
		onShopSearch() {
			// 搜索门店逻辑
			uni.showToast({ title: '搜索功能待实现', icon: 'none' });
		},
		onNav(shop) {
			if (shop.status === 'pause') return;
			// 地图导航逻辑
			uni.openLocation({
				latitude: 39.9042,
				longitude: 116.4074,
				name: shop.name,
				address: shop.address
			});
		},
		onTel(shop) {
			if (shop.status === 'pause') return;
			uni.makePhoneCall({ phoneNumber: shop.tel });
		},
		onBuy() {
			// 模拟支付流程
			uni.showLoading({ title: '支付中...' });
			setTimeout(() => {
				uni.hideLoading();
				uni.showModal({
					title: '支付成功',
					content: '支付成功，可前往门店使用服务',
					showCancel: false
				});
				// 新增：POST添加订单到后端
				const order = {
					serviceId:this.productDetail._id ,
					shopName: this.productDetail.shopName || this.productTitle,
					title: this.productTitle,
					img: this.productBannerImg,
					expiry: this.productDetail.expiry || '2025-12-25',
					tags: [this.productDetail.useTime || '周一至周日可用', this.productDetail.reserveWay || '免预约', this.productDetail.rule1 || '随时退・过期退'],
					price: this.currentPrice,
					count: 1
				};
				uni.request({
					url: 'https://vue.maylab.top/uni/orders',
					method: 'POST',
					data: order,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.showToast({ title: '可前往订单页面查看或使用', icon: 'none' });
						}
					}
				});
			}, 1200);
		}
	},
	onLoad(options) {
		const id = options.id;
		// 请求套餐详情
		uni.request({
			url: `https://vue.maylab.top/api/quick-registration/services/${id}`,
			method: 'GET',
			success: (res) => {
				if (res.statusCode === 200 && res.data && res.data.data) {
					const detail = res.data.data;
					this.productDetail = detail;
					this.productTitle = detail.name;
					this.currentPrice = detail.price;
					this.originPrice = detail.origin || detail.price;
					this.productDesc = detail.description;
					this.productSoldCount = detail.sale || '';
					this.productHotTag = detail.hotTag || '';
					this.productBannerImg = detail.image || '/static/1.jpg';
				} else {
					uni.showToast({ title: '套餐详情数据异常', icon: 'none' });
				}
			},
			fail: (err) => {
				uni.showToast({ title: '套餐详情加载失败', icon: 'none' });
			}
		});
		// 门店信息后台获取（保留原逻辑）
		uni.request({
			url: 'https://vue.maylab.top/uni/stores',
			method: 'GET',
			success: (res) => {
				if (res.data && Array.isArray(res.data.data.stores)) {
					this.shops = res.data.data.stores.map(shop => ({
						id: shop._id,
						name: shop.name,
						address: shop.address,
						tel: shop.phone,
						status: shop.status === '营业中' ? 'open' : 'pause',
						manager: shop.manager,
						staffCount: shop.staffCount,
						businessHours: shop.businessHours,
						description: shop.description,
						createTime: shop.createTime,
						updateTime: shop.updateTime,
						// 兼容原有字段
						rate: 4.5,
						recommend: 0,
						distance: 0
					}));
				} else {
					uni.showToast({ title: '门店数据异常', icon: 'none' });
				}
			},
			fail: (err) => {
				uni.showToast({ title: '门店数据加载失败', icon: 'none' });
			}
		});
	}
}
</script>

<style>
.shop-detail-content {
	padding-bottom: 120rpx;
	position: relative;
	background: #f8f8f8;
	min-height: 100vh;
	box-sizing: border-box;
}

.banner-area {
	position: relative;
	width: 100vw;
	height: 340rpx;
	min-height: 220rpx;
	max-height: 420rpx;
}

.banner-img {
	width: 100vw;
	height: 100%;
	object-fit: cover;
	border-bottom-left-radius: 32rpx;
	border-bottom-right-radius: 32rpx;
}

.banner-btns {
	position: absolute;
	top: 24rpx;
	left: 0;
	width: 100vw;
	display: flex;
	justify-content: space-between;
	padding: 0 32rpx;
	z-index: 2;
}

.banner-btn {
	width: 56rpx;
	height: 56rpx;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16rpx;
	box-shadow: 0 2rpx 8rpx #eee;
}

.iconfont {
	font-size: 32rpx;
	color: #222;
}

.product-info-area {
	background: #fff;
	margin-top: -32rpx;
	border-radius: 32rpx 32rpx 0 0;
	padding: 40rpx 5vw 0 5vw;
	box-shadow: 0 -2rpx 16rpx #eee;
	box-sizing: border-box;
}

.sales-tags {
	display: flex;
	gap: 16rpx;
	margin-bottom: 18rpx;
	flex-wrap: wrap;
}

.sales-label {
	background: linear-gradient(90deg, #ffe7c7, #fff6e3);
	color: #222;
	font-size: 24rpx;
	border-radius: 24rpx;
	padding: 8rpx 24rpx;
	margin-bottom: 8rpx;
}

.price-info {
	display: flex;
	align-items: center;
	gap: 18rpx;
	margin-bottom: 18rpx;
	flex-wrap: wrap;
}

.current-price {
	font-size: 44rpx;
	color: #ff6a00;
	font-weight: bold;
}

.origin-price {
	font-size: 28rpx;
	color: #bbb;
	text-decoration: line-through;
}

.sold-count {
	font-size: 28rpx;
	color: #222;
}

.hot-tag {
	font-size: 24rpx;
	color: #fff;
	background: linear-gradient(90deg, #ff6a00, #ffb800);
	border-radius: 24rpx;
	padding: 6rpx 18rpx;
}

.product-title {
	font-size: 40rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
	color: #222;
	line-height: 1.3;
}

.product-desc {
	font-size: 28rpx;
	color: #444;
	margin-bottom: 10rpx;
	line-height: 1.5;
}

.desc-reason {
	margin-top: 8rpx;
	color: #444;
	font-size: 26rpx;
	line-height: 1.5;
}

.desc-toggle {
	color: #ff6a00;
	font-size: 26rpx;
	margin-left: 16rpx;
}

.service-detail-list {
	margin: 18rpx 0;
}

.service-detail-item {
	display: flex;
	font-size: 28rpx;
	color: #444;
	margin-bottom: 8rpx;
	line-height: 1.5;
}

.service-rule-list {
	margin: 18rpx 0;
}

.service-rule-item {
	font-size: 28rpx;
	color: #444;
	margin-bottom: 8rpx;
	line-height: 1.5;
}

.rule-link {
	color: #ff6a00;
	margin-left: 8rpx;
}

.rule-toggle {
	color: #ff6a00;
	font-size: 26rpx;
	margin-left: 16rpx;
}

.service-rule-more {
	font-size: 26rpx;
	color: #888;
	margin-top: 8rpx;
}

.shop-info-area {
	margin: 24rpx 0 0 0;
	padding: 24rpx;
	background: #f7f7f7;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	gap: 18rpx;
	cursor: pointer;
	flex-wrap: wrap;
}

.shop-distance {
	font-size: 28rpx;
	color: #ff6a00;
}

.shop-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #222;
}

.shop-arrow {
	font-size: 36rpx;
	color: #bbb;
	margin-left: auto;
}

.shop-popup-bg {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.4);
	z-index: 999;
	display: flex;
	align-items: flex-end;
}

.shop-popup {
	width: 100vw;
	background: #fff;
	border-top-left-radius: 32rpx;
	border-top-right-radius: 32rpx;
	padding: 32rpx 5vw 24rpx 5vw;
	box-shadow: 0 -2rpx 16rpx #ccc;
	box-sizing: border-box;
	max-height: 68vh;
	display: flex;
	flex-direction: column;
	animation: popupUp 0.3s;
}

@keyframes popupUp {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18rpx;
}

.popup-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #222;
}

.popup-header-btns {
	display: flex;
	gap: 12rpx;
}

.popup-btn {
	width: 40rpx;
	height: 40rpx;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2rpx 8rpx #eee;
}

.popup-shop-list {
	margin-top: 10rpx;
	flex: 1;
	min-height: 120rpx;
	max-height: 48vh;
	overflow-y: auto;
}

.popup-shop-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 18rpx;
	flex-wrap: wrap;
	padding-bottom: 8rpx;
	border-bottom: 1rpx solid #f2f2f2;
}

.popup-shop-main {
	flex: 1;
	min-width: 0;
}

.popup-shop-title {
	display: flex;
	align-items: center;
	gap: 8rpx;
	flex-wrap: wrap;
}

.popup-shop-name {
	font-size: 26rpx;
	font-weight: bold;
	color: #222;
}

.shop-status {
	font-size: 22rpx;
	color: #ff6a00;
}

.popup-shop-meta {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 6rpx 0;
	gap: 18rpx;
	flex-wrap: wrap;
}

.shop-rate {
	display: flex;
	align-items: center;
	gap: 4rpx;
}

.star {
	color: #ff6a00;
	font-size: 22rpx;
}

.rate-num {
	font-size: 22rpx;
	color: #222;
}

.rate-recommend {
	font-size: 20rpx;
	color: #666;
}

.popup-shop-address {
	font-size: 22rpx;
	color: #666;
	word-break: break-all;
	line-height: 1.5;
	max-width: 80vw;
	white-space: normal;
}

.popup-shop-actions {
	display: flex;
	gap: 10rpx;
	margin-left: 10rpx;
}

.nav-btn,
.tel-btn {
	width: 40rpx;
	height: 40rpx;
	background: #ff6a00;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22rpx;
}

.nav-btn.disabled,
.tel-btn.disabled {
	background: #ccc;
}

.close-btn {
	margin-top: 24rpx;
	background: #f7e5e4;
	font-size: 28rpx;
	border-radius: 40rpx;
	padding: 12rpx 0;
	width: 60rpx;
	margin-left: 10vw;
}

.buy-btn-area {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	background: #fff;
	z-index: 1000;
	box-shadow: 0 -2rpx 16rpx #eee;
	padding: 16rpx 0;
	display: flex;
	justify-content: center;
}

.buy-btn {
	width: 80vw;
	margin: 0;
	background: #e43d33;
	color: #fff;
	font-size: 28rpx;
	border-radius: 40rpx;
	padding: 16rpx 0;
	text-align: center;
	font-weight: bold;
	box-shadow: 0 2rpx 8rpx #eee;
}
</style>
``` 
